<template>
  <div class="registerContainer">
    <el-steps
      :active="active"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="填写基本信息"></el-step>
      <el-step title="公司信息"></el-step>
    </el-steps>
    <div style="margin-top: 20px" v-if="active == 1">
      <el-form
        :rules="rules"
        v-loading="loading"
        element-loading-text="正在注册..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        ref="RegisterForm"
        :model="RegisterForm"
      >
        <el-form-item prop="email">
          <el-input
            type="text"
            v-model="RegisterForm.email"
            auto-complete="false"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="RegisterForm.password"
            show-password
            auto-complete="false"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item prop="rePassword">
          <el-input
            type="password"
            v-model="RegisterForm.rePassword"
            show-password
            auto-complete="false"
            placeholder="请输入再次输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item prop="name">
          <el-input
            type="text"
            v-model="RegisterForm.name"
            auto-complete="false"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>

        <el-form-item prop="phone">
          <el-input
            type="text"
            v-model="RegisterForm.phone"
            auto-complete="false"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>

        <el-form-item prop="address">
          <el-input
            type="text"
            v-model="RegisterForm.address"
            auto-complete="false"
            placeholder="请输入家庭地址"
          ></el-input>
        </el-form-item>

        <el-form-item prop="sex">
          <el-select v-model="RegisterForm.sex" placeholder="请选择性别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="birth">
          <el-date-picker
            v-model="RegisterForm.birth"
            type="date"
            placeholder="选择出生年月日"
            clearable
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="code">
          <el-row :gutter="20">
            <el-col :span="16"
              ><div class="grid-content bg-purple">
                <el-input
                  type="text"
                  v-model="RegisterForm.code"
                  auto-complete="false"
                  placeholder="点击按钮获取验证码"
                  style="width: 250px; margin-right: 5px"
                ></el-input></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  style="width: 103px"
                  v-if="isShow"
                  @click="getCode"
                  >获取验证码</el-button
                >
                <div v-if="!isShow">
                  <el-button type="primary" style="width: 103px" disabled
                    ><span>{{ count }}</span> 秒</el-button
                  >
                </div>
              </div></el-col
            >
          </el-row>
          <el-dialog
            title="上传人脸照片"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-upload
              style="margin-left: 55px"
              class="avatar-uploader"
              action="http://101.43.44.19:8100/api/sso/uploadFace"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="RegisterForm.faceUrl"
                :src="RegisterForm.faceUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">返 回</el-button>
            </span>
          </el-dialog>
        </el-form-item>
        <el-button
          type="primary"
          @click="
            uploadface;
            dialogVisible = true;
          "
          style="margin-bottom: 15px; width: 100%"
          >上传人脸照片</el-button
        >
        <el-button
          type="primary"
          @click="Register"
          style="margin-left: 0px; width: 100%"
          >用户注册</el-button
        >
        <el-button
          type="primary"
          @click="toNext()"
          style="width: 100%; margin: 15px 0 0 0"
          >公司注册</el-button
        >
        <el-button
          type="primary"
          @click="toLogin"
          style="width: 100%; margin: 15px 0 0 0"
          >返回登录</el-button
        >
      </el-form>
    </div>
    <div style="margin-top: 20px" v-if="active == 2">
      <el-form
        :rules="companyrules"
        ref="companyRegisterForm"
        :model="companyRegisterForm"
      >
        <el-form-item prop="companyName">
          <el-input
            type="text"
            v-model="companyRegisterForm.companyName"
            auto-complete="false"
            placeholder="请输入公司公司名称"
          ></el-input>
        </el-form-item>

        <el-form-item prop="companyAddress">
          <el-input
            type="text"
            v-model="companyRegisterForm.companyAddress"
            auto-complete="false"
            placeholder="请输入公司详细地址"
          ></el-input>
        </el-form-item>

        <el-form-item prop="contact">
          <el-input
            type="text"
            v-model="companyRegisterForm.contact"
            auto-complete="false"
            placeholder="请输入公司联系人"
          ></el-input>
        </el-form-item>

        <el-form-item prop="legalPerson">
          <el-input
            type="text"
            v-model="companyRegisterForm.legalPerson"
            auto-complete="false"
            placeholder="请输入公司法定代表人"
          ></el-input>
        </el-form-item>

        <el-form-item prop="companyPhone">
          <el-input
            type="text"
            v-model="companyRegisterForm.companyPhone"
            auto-complete="false"
            placeholder="请输入公司联系电话"
          ></el-input>
        </el-form-item>

        <el-form-item prop="businessLicense">
          <el-input
            type="text"
            v-model="companyRegisterForm.businessLicense"
            auto-complete="false"
            placeholder="请输入公司营业执照"
          ></el-input>
        </el-form-item>

        <el-form-item prop="creditCode">
          <el-input
            type="text"
            v-model="companyRegisterForm.creditCode"
            auto-complete="false"
            placeholder="请输入公司统一信用代码"
          ></el-input>
        </el-form-item>

        <el-button
          type="primary"
          @click="active = 1"
          style="width: 100%; margin: 15px 0 0 0; margin-bottom: 10px"
          >上一步</el-button
        >
        <el-button
          type="primary"
          @click="companyRegister"
          style="margin-left: 0px; width: 100%"
          >公司注册</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      active: 1,
      RegisterForm: {
        email: "",
        password: "",
        rePassword: "",
        code: "",
        name: "",
        phone: "",
        address: "",
        birth: "",
        faceUrl: "",
        sex: "",
      },
      dialogVisible: false,
      options: [
        {
          value: "WOMAN",
          label: "女",
        },
        {
          value: "MAN",
          label: "男",
        },
        {
          value: "SECRET",
          label: "保密",
        },
      ],
      isShow: true,
      count: 0,
      msg: "",
      loading: false,
      captchaUrl: "",
      checked: true,
      loginType: "2",
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        code: [
          { required: true, message: "请输入邮箱验证码", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rePassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        address: [
          { required: true, message: "请输入家庭地址", trigger: "blur" },
        ],
        birth: [
          { required: true, message: "请输入出生年月日", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
      },
      companyrules: {
        businessLicense: [{ required: true, message: "请输入公司营业执照", trigger: "blur" }],
        companyAddress: [{ required: true, message: "请输入公司详细地址", trigger: "blur" }],
        companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        companyPhone: [{ required: true, message: "请输入公司联系电话", trigger: "blur" }],
        contact: [{ required: true, message: "请输入公司联系人", trigger: "blur" }],
        creditCode: [{ required: true, message: "请输入公司统一信用代码", trigger: "blur" }],
        legalPerson: [{ required: true, message: "请输入公司法定代表人", trigger: "blur" }],
      },
      companyRegisterForm: {},
    };
  },
  created() {
    this.countdown();
  },
  methods: {
    countdown() {
      if (Cookie.get("registerCount") == "NaN") {
        Cookie.set("registerIsShow", "true");
      }
      if (!Boolean(Cookie.get("registerIsShow"))) {
        this.isShow = Boolean(Cookie.get("registerIsShow"));
        this.count = parseInt(Cookie.get("registerCount"));
        var times = setInterval(() => {
          this.count--;
          Cookie.set("registerCount", this.count);
          if (this.count <= 0) {
            Cookie.set("registerIsShow", "true");
            this.isShow = true;
            clearInterval(times);
          }
        }, 1000);
      }
    },
    async getCode() {
      if (this.RegisterForm.email == "") {
        this.$message.error("请先填写邮箱");
      } else {
        Cookie.set("registerIsShow", "");
        Cookie.set("registerCount", 10);
        console.log(Cookie.get("registerCount"));
        this.countdown();
        this.axios
          .get("api/sso/sendEmailCode?email=" + this.RegisterForm.email)
          .then((response) => {
            if (response.data.code == "200") {
              this.$message({
                message: "验证码已发送到您的邮箱中",
                type: "success",
              });
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("发送失败");
          });
      }
    },
    toLogin() {
      this.$router.push("/");
    },
    Register() {
      this.loading = true;
      this.$refs.RegisterForm.validate((valid) => {
        if (valid && this.RegisterForm.faceUrl != "") {
          this.axios
            .post(
              "api/sso/register?email=" +
                this.RegisterForm.email +
                "&password=" +
                this.RegisterForm.password +
                "&name=" +
                this.RegisterForm.name +
                "&phone=" +
                this.RegisterForm.phone +
                "&address=" +
                this.RegisterForm.address +
                "&birth=" +
                this.RegisterForm.birth +
                "&faceUrl=" +
                this.RegisterForm.faceUrl +
                "&code=" +
                this.RegisterForm.code +
                "&sex=" +
                this.RegisterForm.sex
            )
            .then((response) => {
              console.log(response);
              if (response.data.code == 200) {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                this.$router.push("/");
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("注册失败");
            });
        } else {
          this.$message.error("请填写全部内容，并上传人脸照片");
          return false;
        }
      });
      this.loading = false;
    },
    companyRegister(){
      Object.assign(this.companyRegisterForm, this.RegisterForm)
      this.$refs.companyRegisterForm.validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "api/sso/registerCompany?email=" +
                this.companyRegisterForm.email +
                "&password=" +
                this.companyRegisterForm.password +
                "&name=" +
                this.companyRegisterForm.name +
                "&phone=" +
                this.companyRegisterForm.phone +
                "&address=" +
                this.companyRegisterForm.address +
                "&birth=" +
                this.companyRegisterForm.birth +
                "&faceUrl=" +
                this.companyRegisterForm.faceUrl +
                "&code=" +
                this.companyRegisterForm.code +
                "&sex=" +
                this.companyRegisterForm.sex +
                "&businessLicense=" +
                this.companyRegisterForm.businessLicense +
                "&companyAddress=" +
                this.companyRegisterForm.companyAddress +
                "&companyName=" +
                this.companyRegisterForm.companyName +
                "&companyPhone=" +
                this.companyRegisterForm.companyPhone +
                "&contact=" +
                this.companyRegisterForm.contact +
                "&creditCode=" +
                this.companyRegisterForm.creditCode +
                "&legalPerson=" +
                this.companyRegisterForm.legalPerson
            )
            .then((response) => {
              console.log(response);
              if (response.data.code == 200) {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                this.$router.push("/");
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("注册失败");
            });
        } else {
          this.$message.error("请填写全部内容，并上传人脸照片");
          return false;
        }
      });
      
    },
    uploadface() {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleAvatarSuccess(res) {
      console.log(res);
      if (res.code != "200") {
        this.$message.error("文件格式不支持");
      } else {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.RegisterForm.faceUrl = res.value;
        console.log(this.RegisterForm.faceUrl);
      }
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isimg = file.type === "image/png" || "image/jpeg";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isimg) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isimg && isLt10M;
    },
    toNext() {
      this.$refs.RegisterForm.validate((valid) => {
        if (valid  && this.RegisterForm.faceUrl != '') {
          this.active = 2;
        } else {
          this.$message.error("请填写全部内容，并上传人脸照片");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.registerContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 80px auto;
  width: 400px;
  padding: 15px 35px;
  background: #ffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  margin-top: 120px;
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 200px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 300px;
  display: block;
}
</style>
